<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="google-site-verification" content="7KS95cB8cFmnQoQVRJMaZNkUr2cUp7rDVnHrHxvoyOI" />
  <link rel="icon" type="image/png" href="https://webeame.com/wp-content/plugins/webeame-landing/assets/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Webéame — Tu Tarjeta Web profesional en minutos</title>
  <meta name="description" content="Crea tu web profesional en minutos y forma parte del directorio de profesionales de Webéame. Sin conocimientos técnicos, sin mantenimiento. Solo tú y tus clientes." />
  <link rel="canonical" href="https://webeame.com/" />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0E0D0B;
      --surface: #161410;
      --card-bg: #252220;
      --accent: #D4A853;
      --accent-dim: rgba(212,168,83,0.15);
      --border: rgba(255,255,255,0.07);
      --muted: rgba(255,255,255,0.38);
      --text: #F0EDE6;
      --serif: 'Playfair Display', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }
    body { background: var(--bg); color: var(--text); font-family: var(--serif); overflow-x: hidden; }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 0 48px; height: 62px;
      display: flex; align-items: center; justify-content: space-between;
      transition: background 0.3s, border-color 0.3s;
      border-bottom: 1px solid transparent;
    }
    nav.scrolled { background: rgba(14,13,11,0.94); backdrop-filter: blur(14px); border-color: var(--border); }
    .logo img { display: block; height: 28px; width: auto; }
    .logo { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
    .logo span { color: var(--accent); }
    .nav-links { display: flex; gap: 32px; align-items: center; }
    .nav-links a { font-family: var(--sans); font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
    .nav-links a:hover { color: var(--text); }
    .btn-primary { padding: 9px 22px; background: var(--accent); color: #0E0D0B; border: none; border-radius: 8px; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 0.01em; transition: opacity 0.2s; text-decoration: none; display: inline-block; }
    .btn-primary:hover { opacity: 0.88; }
    .btn-ghost { padding: 9px 18px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.2s; }
    .btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
    .nav-user { font-family: var(--sans); font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    /* ── HERO ── */
    #hero { min-height: 100vh; display: flex; align-items: center; padding: 110px 48px 80px; max-width: 1120px; margin: 0 auto; gap: 80px; }
    .hero-copy { flex: 1; }
    .pill { display: inline-block; padding: 4px 14px; border: 1px solid rgba(212,168,83,0.3); border-radius: 20px; font-family: var(--sans); font-size: 11px; color: var(--accent); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 28px; }
    h1 { font-size: clamp(42px, 5vw, 66px); font-weight: 900; line-height: 1.07; letter-spacing: -0.03em; margin-bottom: 24px; }
    h1 em { color: var(--accent); font-style: normal; }
    .hero-sub { font-family: var(--sans); font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 420px; margin-bottom: 40px; }
    .hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
    .btn-hero { padding: 14px 34px; background: var(--accent); color: #0E0D0B; border: none; border-radius: 10px; font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; text-decoration: none; display: inline-block; }
    .btn-hero:hover { opacity: 0.88; }
    .hero-sub-note { font-family: var(--sans); font-size: 13px; color: var(--muted); }
    .hero-stats { display: flex; gap: 36px; margin-top: 52px; }
    .stat-n { font-size: 26px; font-weight: 700; color: var(--text); }
    .stat-l { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* ── MINI-WEB PREVIEW ── */
    .hero-preview { flex: 1; display: flex; justify-content: center; position: relative; height: 420px; align-items: center; }
    .cards-wrap { position: relative; width: 280px; height: 400px; }
    .mini-card { position: absolute; top: 0; left: 0; width: 280px; border-radius: 16px; overflow: hidden; background: var(--card-bg, var(--surface)); box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10); font-family: var(--serif); opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1); pointer-events: none; display: flex; flex-direction: column; }
    .mini-card.active { opacity: 1; transform: none; pointer-events: auto; }
    .mini-card .g-img-wrap { height: 110px; }
    .mini-card .card-inner { padding: 10px 14px 14px; flex: 1; display: flex; flex-direction: column; }
    .mini-card .g-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; line-height: 1.3; color: var(--text); }
    .mini-card .g-role { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
    .mini-card .g-bio  { font-family: var(--sans); font-size: 11px; color: var(--muted); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .mini-card .card-btns { display: flex; gap: 8px; margin-top: 10px; }
    .mini-card .card-btn-main { flex: 1; padding: 8px 0; border-radius: 8px; text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 700; text-decoration: none; }
    .mini-card .card-btn-sec { flex: 1; padding: 8px 0; border-radius: 8px; text-align: center; font-family: var(--sans); font-size: 11px; color: var(--muted); border: 1px solid var(--border); text-decoration: none; }
    .dots { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
    .dot { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.2); transition: all 0.3s; cursor: pointer; width: 6px; }
    .dot.active { background: var(--accent); width: 20px; }

    /* ── DIVIDER / SECTIONS ── */
    .divider { border: none; border-top: 1px solid var(--border); }
    section { padding: 100px 48px; }
    .section-inner { max-width: 1120px; margin: 0 auto; }
    .section-tag { font-family: var(--sans); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
    h2 { font-size: clamp(36px, 4vw, 50px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
    h2 em { color: var(--accent); font-style: normal; }

    /* ── STEPS ── */
    .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; }
    .step { padding: 40px 36px; border: 1px solid var(--border); }
    .step:first-child { border-radius: 12px 0 0 12px; }
    .step:last-child { border-radius: 0 12px 12px 0; }
    .step.mid { background: var(--surface); }
    .step-num { font-size: 56px; font-weight: 900; color: rgba(255,255,255,0.06); line-height: 1; margin-bottom: 24px; }
    .step h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
    .step p { font-family: var(--sans); font-size: 15px; color: var(--muted); line-height: 1.6; }

    /* ── GALLERY ── */
    .gallery-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; }
    .gallery-link { font-family: var(--sans); font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 4px; transition: color 0.2s; }
    .gallery-link:hover { color: var(--text); }
    .search-bar { display: flex; gap: 16px; margin-bottom: 44px; flex-wrap: wrap; align-items: flex-end; }
    .search-field { display: flex; flex-direction: column; gap: 6px; }
    .search-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
    .search-input-wrap { position: relative; width: 280px; }
    .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 15px; }
    .search-input { width: 100%; padding: 12px 16px 12px 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-family: var(--sans); font-size: 14px; color: var(--text); outline: none; transition: border-color 0.2s; }
    .search-input::placeholder { color: var(--muted); }
    .search-input:focus { border-color: rgba(212,168,83,0.4); }
    .search-city { padding: 12px 16px; width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-family: var(--sans); font-size: 14px; color: var(--text); outline: none; transition: border-color 0.2s; }
    .search-city::placeholder { color: var(--muted); }
    .search-city:focus { border-color: rgba(212,168,83,0.4); }
    .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .gallery-card { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); background: var(--card-bg, var(--surface)); cursor: pointer; transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s; text-decoration: none; display: flex; flex-direction: column; }
    .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(0,0,0,0.5); text-decoration: none; }
    body.wb-light .gallery-card { border-color: rgba(0,0,0,0.10); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
    body.wb-light .mini-card { box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08); }
    body.wb-light .mini-card { box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08); }
    /* Zona hero */
    .g-img-wrap { position: relative; height: 120px; overflow: hidden; flex-shrink: 0; }
    .g-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .g-hero-ph { width: 100%; height: 100%; display: block; }
    /* Avatar sobre el hero, alineado abajo-izquierda SIN salir de la zona */
    .g-avatar-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
    .g-avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.1); }
    .g-avatar-ph  { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
    .g-logo { height: 28px; max-width: 90px; object-fit: contain; opacity: 0.88; }
    /* Contenido */
    .card-inner { padding: 10px 14px 14px; flex: 1; display: flex; flex-direction: column; }
    .g-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; line-height: 1.3; color: var(--text); }
    .g-role { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
    .g-bio  { font-family: var(--sans); font-size: 11px; color: var(--muted); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .no-results { grid-column: 1 / -1; padding: 48px 0; text-align: center; font-family: var(--sans); font-size: 15px; color: var(--muted); }
    .gallery-loading { grid-column: 1 / -1; padding: 48px 0; text-align: center; font-family: var(--sans); font-size: 14px; color: var(--muted); }
    .gallery-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
    .page-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-family: var(--sans); font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .page-btn:hover, .page-btn.active { border-color: var(--accent); color: var(--accent); }

    /* ── PRICING ── */
    #precios .section-inner { text-align: center; }
    .pricing-sub { font-family: var(--sans); font-size: 16px; color: var(--muted); margin-top: 16px; }
    .wb-guarantee-note { position:relative; display:inline-block; }
    .wb-guarantee-note sup { font-size:10px; color:var(--accent); cursor:pointer; margin-left:1px; vertical-align:super; }
    .wb-guarantee-note:hover .wb-guarantee-tip,
    .wb-guarantee-note:focus-within .wb-guarantee-tip { opacity:1; pointer-events:auto; }
    .wb-guarantee-tip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#1e293b; border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:8px 12px; font-size:12px; color:rgba(255,255,255,.7); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:10; font-family:var(--sans); }
    .wb-guarantee-tip a { color:var(--accent); text-decoration:underline; }
    .wb-guarantee-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#1e293b; }
    .plans-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 52px auto 0; }
    .plan-group-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; text-align: left; }
    .plan-col { display: flex; flex-direction: column; gap: 0; }
    .plan { padding: 32px 30px; border: 1px solid var(--border); position: relative; text-align: left; }
    .plan-col .plan:first-of-type { border-radius: 12px 12px 0 0; border-bottom: none; }
    .plan-col .plan:last-of-type { border-radius: 0 0 12px 12px; }
    .plan.highlight { background: var(--surface); border-color: rgba(212,168,83,0.3); }
    .plan-period-tag { display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 14px; background: rgba(255,255,255,0.06); color: var(--muted); }
    .plan.highlight .plan-period-tag { background: var(--accent-dim); color: var(--accent); }
    .plan-badge { position: absolute; top: 12px; right: 14px; background: var(--accent); color: #0E0D0B; font-family: var(--sans); font-size: 9px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.06em; }
    .plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
    .plan-price .amount { font-size: 40px; font-weight: 900; letter-spacing: -0.04em; }
    .plan-price .per { font-family: var(--sans); font-size: 13px; color: var(--muted); }
    .plan-desc { font-family: var(--sans); font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }
    .plan-features { margin-bottom: 22px; }
    .plan-feature { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
    .feat-dot-wrap { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
    .highlight .feat-dot-wrap { background: var(--accent-dim); }
    .feat-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
    .highlight .feat-dot { background: var(--accent); }
    .feat-label { font-family: var(--sans); font-size: 12px; color: var(--muted); line-height: 1.4; }
    .highlight .feat-label { color: var(--text); }
    .feat-addon .feat-label { font-style: italic; opacity: 0.7; }
    .btn-plan { width: 100%; padding: 11px 0; border-radius: 8px; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--muted); transition: opacity 0.2s; text-decoration: none; display: block; text-align: center; }
    .plan.highlight .btn-plan { background: var(--accent); color: #0E0D0B; border: none; }
    .btn-plan:hover { opacity: 0.8; }

    /* ── INVITE NOTE ── */
    .invite-note { display: flex; align-items: center; gap: 12px; max-width: 860px; margin: 24px auto 0; padding: 16px 20px; background: rgba(212,168,83,0.06); border: 1px solid rgba(212,168,83,0.18); border-radius: 10px; font-family: var(--sans); font-size: 13px; color: var(--muted); line-height: 1.5; }
    .invite-icon { font-size: 18px; flex-shrink: 0; }
    .invite-note strong { color: var(--accent); font-weight: 700; }

    /* ── CTA FINAL ── */
    #cta { text-align: center; }
    #cta h2 { font-size: clamp(40px, 5vw, 58px); margin-bottom: 24px; }
    #cta p { font-family: var(--sans); font-size: 17px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; }
    .btn-final { padding: 16px 46px; background: var(--accent); color: #0E0D0B; border: none; border-radius: 12px; font-family: var(--sans); font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; text-decoration: none; display: inline-block; }
    .btn-final:hover { opacity: 0.88; }
    .cta-note { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,0.2); margin-top: 20px; }

    /* ── FOOTER ── */
    footer { padding: 40px 48px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .footer-copy { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,0.2); }


    /* ── BETA NOTICE (hero) ── */
    .beta-notice { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; background: rgba(212,168,83,0.08); border: 1px solid rgba(212,168,83,0.2); border-radius: 20px; font-family: var(--sans); font-size: 12px; color: var(--accent); margin-bottom: 20px; }
    .beta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

    /* ── BETA BLOCK (pricing) ── */
    .beta-block { max-width: 860px; margin: 32px auto 0; border: 1px solid rgba(212,168,83,0.2); border-radius: 16px; overflow: hidden; background: rgba(212,168,83,0.04); }
    .beta-block-inner { display: grid; grid-template-columns: 1fr 1px 1fr; }
    .beta-block-divider { background: rgba(212,168,83,0.15); }
    .beta-block-col { padding: 32px 36px; }
    .beta-block-tag { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
    .beta-block-title { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 14px; }
    .beta-block-text { font-family: var(--sans); font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
    .beta-block-btn { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 2px; transition: color .15s, border-color .15s; }
    .beta-block-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
    .beta-block-btn-gold { color: var(--accent); border-bottom-color: rgba(212,168,83,0.3); }
    .beta-block-btn-gold:hover { color: var(--accent); border-bottom-color: var(--accent); opacity: .8; }

    /* ── GLOW BG ── */
    .hero-glow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(212,168,83,0.04) 0%, transparent 70%); }
    #hero, section, nav { position: relative; z-index: 1; }
    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */

    /* Tablet */
    @media (max-width: 900px) {
      nav { padding: 0 24px; }

      #hero { flex-direction: column; padding: 90px 24px 60px; gap: 48px; min-height: auto; }
      .hero-preview { width: 100%; height: 340px; }

      .steps-grid { grid-template-columns: 1fr; gap: 0; }
      .step:first-child { border-radius: 12px 12px 0 0; }
      .step:last-child  { border-radius: 0 0 12px 12px; }
      .step.mid { border-top: none; border-bottom: none; }

      .gallery-grid { grid-template-columns: repeat(2, 1fr); }

      .plans-wrap { grid-template-columns: 1fr; }
      .plan-col .plan:first-of-type { border-radius: 12px 12px 0 0; border-bottom: none; }
      .plan-col .plan:last-of-type  { border-radius: 0 0 12px 12px; }

      section { padding: 64px 24px; }
      .gallery-head { flex-direction: column; align-items: flex-start; gap: 12px; }
      .search-input-wrap { width: 100%; }
      .search-city { width: 100%; }
      .search-bar { flex-direction: column; gap: 12px; }
      .search-field { width: 100%; }
    }

    /* Móvil */
    @media (max-width: 600px) {
      nav { padding: 0 16px; }
      .nav-links { gap: 12px; }
      .btn-primary { padding: 8px 16px; font-size: 12px; }

      h1 { font-size: 36px; }
      h2 { font-size: 28px; }
      .hero-sub { font-size: 15px; }
      .hero-stats { gap: 24px; }

      section { padding: 48px 16px; }

      .hero-preview { height: 280px; }
      .cards-wrap { width: 240px; height: 360px; }
      .mini-card { width: 240px; }

      .gallery-grid { grid-template-columns: 1fr; }

      .plans-wrap { max-width: 100%; }

      #cta h2 { font-size: 32px; }
      #cta p  { font-size: 15px; }
      .btn-final { padding: 14px 28px; font-size: 15px; }

      footer { flex-direction: column; gap: 12px; text-align: center; padding: 28px 16px; }
      .footer-legal-links { justify-content: center; }
    }

    /* ── HAMBURGUESA ── */
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.25s; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mobile-menu { display: none; position: fixed; top: 62px; left: 0; right: 0; bottom: 0; background: rgba(14,13,11,0.98); backdrop-filter: blur(16px); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { font-family: var(--sans); font-size: 20px; color: var(--text); text-decoration: none; font-weight: 600; transition: color 0.2s; }
    .mobile-menu a:hover { color: var(--accent); }
    .mobile-menu .btn-mobile { padding: 14px 40px; background: var(--accent); color: #0E0D0B; border-radius: 10px; font-weight: 700; font-size: 16px; }
    @media (max-width: 768px) {
      .hamburger { display: flex; }
      .nav-links { display: none; }
    }

    .footer-legal-link { font-family:var(--sans); font-size:12px; color:rgba(255,255,255,0.25); text-decoration:none; transition:color .15s; }
    .footer-legal-link:hover { color:rgba(255,255,255,0.6); }
    body.wb-light .footer-legal-link { color:rgba(0,0,0,0.35); }
    body.wb-light .footer-legal-link:hover { color:rgba(0,0,0,0.7); }
    body.wb-light .footer-copy { color:rgba(0,0,0,0.3); }
    /* ── LIGHT MODE ── */
    body.wb-light {
      --bg: #F5F0E8; --surface: #EDE8DF; --accent: #B8882A;
      --accent-dim: rgba(184,136,42,0.15); --border: rgba(0,0,0,0.08);
      --muted: rgba(0,0,0,0.45); --text: #1A1714;
      --card-bg: #ffffff;
    }
    body.wb-light nav.scrolled { background: rgba(245,240,232,0.94); }
    body.wb-light .mobile-menu { background: rgba(245,240,232,0.98); }
    body.wb-light .hero-glow { background: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(184,136,42,0.06) 0%, transparent 70%); }
    body.wb-light .step { border-color: rgba(0,0,0,0.08); }
    body.wb-light .search-input, body.wb-light .search-city { background: #EDE8DF; color: var(--text); }
    body.wb-light .gallery-card { border-color: rgba(0,0,0,0.06); }
    body.wb-light .plan { border-color: rgba(0,0,0,0.08); }
    body.wb-light .plan.highlight { background: #EDE8DF; border-color: rgba(184,136,42,0.3); }
    body.wb-light footer { border-color: rgba(0,0,0,0.08); }
    /* toggle button */
    .wb-theme-toggle { background: none; border: 1px solid var(--border); border-radius: 20px;
      padding: 5px 12px; font-family: var(--sans); font-size: 12px; color: var(--muted);
      cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; }
    .wb-theme-toggle:hover { color: var(--text); border-color: var(--muted); }
  </style>
</head>
<body>

<div class="hero-glow"></div>

<!-- NAV -->
<nav id="nav">
  <a class="logo" href="https://webeame.com/">
    <img id="wbLogoImg" src="https://webeame.com/wp-content/plugins/webeame-landing/assets/webeame-logo-dark.svg" data-dark="https://webeame.com/wp-content/plugins/webeame-landing/assets/webeame-logo-dark.svg" data-light="https://webeame.com/wp-content/plugins/webeame-landing/assets/webeame-logo-light.svg" alt="Webéame" height="32"
         onerror="this.style.display='none';this.nextElementSibling.style.display='inline'" />
    <span style="display:none">Webéame<span style="color:#D4A853">.</span></span>
  </a>
  <div class="nav-links">
    <a href="#como-funciona">Cómo funciona</a>
    <a href="#directorio">Directorio</a>
    <a href="#comparativa">Comparativa</a>
    <a href="#precios">Precios</a>
    <!-- Estado sesión: se rellena por JS -->
    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;"></div>
    <button class="wb-theme-toggle" id="wbThemeToggle" aria-label="Cambiar tema"></button>
  </div>

  <button class="hamburger" id="hamburger" aria-label="Menú"><span></span><span></span><span></span></button>
</nav>
<div class="mobile-menu" id="mobileMenu">
      <a href="#como-funciona">Cómo funciona</a>
    <a href="#directorio">Directorio</a>
    <a href="#comparativa">Comparativa</a>
    <a href="#precios">Precios</a>
  <a href="https://webeame.com/panel/iniciar-sesion">Iniciar sesión</a>
  <a class="btn-mobile" href="https://webeame.com/panel/iniciar-sesion?registro=1">Crear mi Tarjeta Web →</a>
  <button class="wb-theme-toggle" id="wbThemeToggleMobile" aria-label="Cambiar tema" style="font-size:15px;padding:10px 20px"></button>
</div>

<!-- HERO -->
<div style="max-width:1120px;margin:0 auto;">
  <div id="hero">
    <div class="hero-copy">
      <div class="pill">Para profesionales independientes</div>
      <h1>Tu Tarjeta Web profesional,<br><em>lista hoy.</em></h1>
      <p class="hero-sub">Una web profesional completa que tus clientes pueden guardar en el móvil. Que te encuentren en Google y te contacten con un clic. Sin diseñador, sin instalaciones.</p>
      <p style="font-family:var(--sans);font-size:13px;color:rgba(212,168,83,.7);margin:-8px 0 20px;line-height:1.5">¿Qué es una Tarjeta Web? La potencia de una web profesional, con la simplicidad de una tarjeta de visita. Tu presencia online completa en un solo enlace.</p>
      <div class="beta-notice">
        <span class="beta-dot"></span>
        <span>Beta privada · Solo por invitación</span>
      </div>
      <div class="hero-cta">
        <a class="btn-hero" href="https://webeame.com/panel/iniciar-sesion?registro=1">Crear mi web →</a>
        <span class="hero-sub-note">¿No tienes invitación? <a href="#conseguir-invitacion" style="color:var(--accent);text-decoration:none;">Consigue una →</a></span>
      </div>
      <div class="hero-stats">
        <div><div class="stat-n">✔</div><div class="stat-l">Lista para compartir</div></div>
        <div><div class="stat-n">✔</div><div class="stat-l">URL propia en Webéame</div></div>
        <div><div class="stat-n">✔</div><div class="stat-l">Visible en el directorio</div></div>
      </div>
    </div>

    <div class="hero-preview">
      <div class="cards-wrap" id="cardsWrap">
        <div class="gallery-loading">Cargando webs…</div>
      </div>
      <div class="dots" id="dots"></div>
    </div>
  </div>
</div>

<!-- CÓMO FUNCIONA -->
<hr class="divider" />
<section id="como-funciona">
  <div class="section-inner">
    <p class="section-tag">El proceso</p>
    <h2>Tu web en solo 3 pasos.</h2>
    <div class="steps-grid">
      <div class="step">
        <div class="step-num">01</div>
        <h3>Te registras</h3>
        <p>Nombre, profesión, ciudad. Nada más.</p>
      </div>
      <div class="step mid">
        <div class="step-num">02</div>
        <h3>Tu Tarjeta Web aparece</h3>
        <p>Con tu URL, tu foto y tus datos de contacto. Lista para compartir.</p>
      </div>
      <div class="step">
        <div class="step-num">03</div>
        <h3>La ajustas</h3>
        <p>Foto, textos, módulos. Tú decides cuánto.</p>
      </div>
    </div>
  </div>
</section>

<section id="mis-tarjetas-pro" style="background:rgba(212,168,83,.04);border-top:1px solid rgba(212,168,83,.15);border-bottom:1px solid rgba(212,168,83,.15)">
  <div class="section-inner">
    <div style="display:flex;gap:64px;align-items:center;flex-wrap:wrap">
      <div style="flex:1;min-width:280px">
        <p class="section-tag">Tu Tarjeta Web, en el bolsillo de quien te contrató</p>
        <h2 style="margin-bottom:16px">Tus clientes te llevan<br><em>siempre a mano</em></h2>
        <p style="font-family:var(--sans);font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:28px">Quien visita tu Tarjeta Web puede guardarla en <strong style="color:var(--text)">Mis Tarjetas</strong> — una app que se instala en el móvil en segundos. Cuando actualices tu teléfono, tus precios o tus servicios, todos los que te tienen guardado lo verán automáticamente.</p>
        <div style="display:flex;flex-direction:column;gap:12px">
          <div style="display:flex;gap:14px;align-items:flex-start">
            <span style="color:#D4A853;font-size:20px;flex-shrink:0;margin-top:1px">📞</span>
            <div>
              <div style="font-family:var(--sans);font-weight:700;color:var(--text);margin-bottom:2px">Siempre te encontrarán</div>
              <div style="font-family:var(--sans);font-size:13px;color:var(--muted)">Aunque cambies de número o de ciudad, quien te tiene guardado siempre verá tus datos actuales.</div>
            </div>
          </div>
          <div style="display:flex;gap:14px;align-items:flex-start">
            <span style="color:#D4A853;font-size:20px;flex-shrink:0;margin-top:1px">🔁</span>
            <div>
              <div style="font-family:var(--sans);font-weight:700;color:var(--text);margin-bottom:2px">Más repetición, más referidos</div>
              <div style="font-family:var(--sans);font-size:13px;color:var(--muted)">Un cliente que te tiene a mano vuelve antes y te recomienda más fácilmente. Tu web hace el trabajo.</div>
            </div>
          </div>
          <div style="display:flex;gap:14px;align-items:flex-start">
            <span style="color:#D4A853;font-size:20px;flex-shrink:0;margin-top:1px">📊</span>
            <div>
              <div style="font-family:var(--sans);font-weight:700;color:var(--text);margin-bottom:2px">Sabes de dónde vienen tus visitas</div>
              <div style="font-family:var(--sans);font-size:13px;color:var(--muted)">En tus estadísticas verás cuántas visitas llegan desde Mis Tarjetas y cuántas desde Google u otras fuentes.</div>
            </div>
          </div>
        </div>
      </div>
      <div style="flex-shrink:0;text-align:center;min-width:220px">
        <div style="background:rgba(212,168,83,.1);border:1px solid rgba(212,168,83,.25);border-radius:20px;padding:32px 28px;display:inline-block">
          <div style="font-size:48px;margin-bottom:12px">📇</div>
          <div style="font-family:var(--serif);font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px">Mis Tarjetas</div>
          <div style="font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:20px">La app que guarda<br>Tarjetas Web de profesionales</div>
          <a href="https://webeame.com/mis-tarjetas" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:#D4A853;color:#0E0D0B;border-radius:10px;font-family:var(--sans);font-size:14px;font-weight:700;text-decoration:none;transition:opacity .2s" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
            Ver cómo funciona →
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- DIRECTORIO -->
<hr class="divider" />
<section id="directorio">
  <div class="section-inner">
    <div class="gallery-head">
      <div>
        <p class="section-tag">Directorio Webéame</p>
        <h2>Encuentra al profesional<br><em>que necesitas.</em></h2>
      </div>
      <a href="https://webeame.com/directorio" class="gallery-link">Ver directorio completo →</a>
    </div>
    <div class="search-bar">
      <div class="search-field">
        <span class="search-label">¿A quién buscas?</span>
        <div class="search-input-wrap">
          <span class="search-icon">⌕</span>
          <input class="search-input" id="searchQ" type="text" placeholder="Nombre, profesión…" autocomplete="off" />
        </div>
      </div>
      <div class="search-field">
        <span class="search-label">¿Dónde?</span>
        <input class="search-city" id="searchCity" type="text"
               placeholder="Ciudad…" autocomplete="off" />
      </div>
    </div>
    <div class="gallery-grid" id="galleryGrid">
      <div class="gallery-loading">Cargando profesionales…</div>
    </div>
    <div class="gallery-pagination" id="pagination"></div>
  </div>
</section>

<section id="precios">
  <div class="section-inner">
    <p class="section-tag">Sin sorpresas</p>
    <h2>Un precio.<br><em>Todo incluido.</em></h2>
    <p class="pricing-sub">Sin letra pequeña. Sin permanencia. <span class="wb-guarantee-note">Garantía de devolución 90 días<sup>*</sup><span class="wb-guarantee-tip">Sujeto a condiciones · <a href="https://webeame.com/terminos">Ver términos</a></span></span>.</p>

    <div class="plans-wrap" style="display:flex;justify-content:center;margin-top:52px">
      <div class="plan-col" style="max-width:360px;width:100%">
        <div class="plan highlight" style="text-align:center">
          <div class="plan-badge">TODO INCLUIDO</div>
          <div class="plan-price"><span class="amount">29€</span><span class="per">&nbsp;/ año</span></div>
          <p class="plan-desc" style="font-size:13px;color:var(--muted);margin-bottom:4px">+ IVA · <span class="wb-guarantee-note">Garantía de devolución 90 días<sup>*</sup><span class="wb-guarantee-tip">Sujeto a condiciones · <a href="https://webeame.com/terminos">Ver términos</a></span></span></p>
          <div class="plan-features" style="text-align:left;margin-top:20px">
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Web publicada al instante</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Foto, bio y botones de contacto</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Portfolio, horario y mapa</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Galería de imágenes</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Testimonios de clientes</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Módulo de vídeo</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Publicaciones con imagen</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Estadísticas completas</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">URL propia en Webéame</span></div>
            <div class="plan-feature"><div class="feat-dot-wrap"><div class="feat-dot"></div></div><span class="feat-label">Visible en el directorio</span></div>
          </div>
          <a class="btn-plan" href="https://webeame.com/panel/iniciar-sesion?registro=1" style="margin-top:24px;background:var(--accent);color:#0a0c12;border-color:var(--accent)">Crear mi web →</a>
        </div>
      </div>
    </div>

    <div id="conseguir-invitacion" class="beta-block">
      <div class="beta-block-inner">
        <div class="beta-block-col">
          <div class="beta-block-tag">🔒 Fase beta privada</div>
          <h3 class="beta-block-title">Webéame está en fase beta.<br>El acceso es solo por invitación.</h3>
          <p class="beta-block-text">Para registrarte necesitas un código de invitación. Puedes pedírselo a cualquier profesional que ya tenga su web en Webéame — encuéntralos en el <a href="https://webeame.com/directorio" style="color:var(--accent)">directorio</a>. O si prefieres, pídenos uno directamente:</p>
          <div style="display:flex;gap:10px;flex-wrap:wrap">
            <a href="https://webeame.com/directorio" class="beta-block-btn">Ver profesionales en Webéame →</a>
            <button type="button" class="beta-block-btn" id="btnPedirInvitacion" style="cursor:pointer;background:none;border:none;font-family:inherit;font-size:inherit;padding:0">Pedir invitación →</button>
          </div>
        </div>
        <div class="beta-block-divider"></div>
        <div class="beta-block-col">
          <div class="beta-block-tag">🎁 ¿Ya tienes tu Tarjeta Web?</div>
          <h3 class="beta-block-title">Comparte tu invitación.<br>Gana tiempo gratis.</h3>
          <p class="beta-block-text">Cada profesional que se registre con tu código te da ventajas: más meses de acceso gratuito antes de decidir si renovar.</p>
          <a href="https://webeame.com/panel/escritorio" class="beta-block-btn beta-block-btn-gold">Ir a mi panel a compartir →</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- COMPARATIVA -->
<hr class="divider" />
<section id="comparativa">
  <div class="section-inner">
    <p class="section-tag">¿Por qué Webéame?</p>
    <h2>Presencia profesional real.<br><em>No solo un árbol de enlaces.</em></h2>
    <p style="font-family:var(--sans);font-size:16px;color:var(--muted);line-height:1.7;max-width:600px;margin:0 0 16px">Linktree, Taplink o Campsite son herramientas para reunir enlaces. Webéame es una Tarjeta Web profesional completa: te encuentran en Google, te contactan con un clic y pueden guardarte en el móvil. No es lo mismo.</p>
    <p style="font-family:var(--sans);font-size:14px;color:rgba(212,168,83,.8);margin:0 0 40px">Webéame está completamente en español y diseñado para el mercado hispanohablante — desde el panel hasta el directorio de profesionales.</p>

    <h3 style="font-family:var(--sans);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;margin-bottom:16px">Webéame vs herramientas de enlace en bio</h3>

    <div style="overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:48px">
    <table style="width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;min-width:620px">
      <thead>
        <tr>
          <th style="text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em">Característica</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em">Linktree</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em">Taplink</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em">Campsite</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em">ClikOk</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.06);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2)"><span style="color:var(--accent);font-weight:800;font-size:12px">Webéame</span></th>
        </tr>
      </thead>
      <tbody>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">En español</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Web con URL propia y diseño pro</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Aparece en Google (SEO real)</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Directorio de profesionales</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Mapa de ubicación</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Horario de atención</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">⚠️</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Portfolio de servicios</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">⚠️</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Galería de imágenes</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">⚠️</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Testimonios de clientes</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">⚠️</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Módulo de vídeo</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">⚠️</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Guardado en móvil por el cliente</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Publicaciones en tu web</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Botones de contacto</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Redes sociales</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Estadísticas</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">⚠️</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;;color:var(--text);font-weight:700">Precio anual</td>
          <td style="text-align:center;padding:9px 14px;;color:var(--muted)">0–144€</td>
          <td style="text-align:center;padding:9px 14px;;color:var(--muted)">0–108€</td>
          <td style="text-align:center;padding:9px 14px;;color:var(--muted)">0–96€</td>
          <td style="text-align:center;padding:9px 14px;;color:var(--muted)">Gratis</td>
          <td style="text-align:center;padding:9px 14px;;background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:var(--accent)">29€ + IVA</td>
        </tr>
              </tbody>
    </table>
    </div>

    <h3 style="font-family:var(--sans);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;margin-bottom:12px">Webéame vs directorios</h3>
    <p style="font-family:var(--sans);font-size:14px;color:var(--muted);text-align:center;max-width:560px;margin:0 auto 20px;line-height:1.6">Páginas Amarillas y Google te listan. Webéame te da tu propio espacio además de listarte. No es lo mismo.</p>

    <div style="overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:40px">
    <table style="width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;min-width:560px">
      <thead>
        <tr>
          <th style="text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em">Característica</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em">Páginas Amarillas</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em">Google Business</th>
          <th style="text-align:center;padding:10px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.06);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2)"><span style="color:var(--accent);font-weight:800;font-size:12px">Webéame</span></th>
        </tr>
      </thead>
      <tbody>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Ficha en directorio con SEO</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Web propia con URL personalizada</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Tú controlas tu contenido</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Diseño profesional personalizable</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Galería de fotos</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Mapa y horario</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Botones de contacto directos</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Estadísticas de visitas</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Guardado en móvil por el cliente</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Portfolio y testimonios propios</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Publicaciones y novedades</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">❌</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="">
          <td style="padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-weight:400">Sin comisiones</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--muted)">✅</td>
          <td style="text-align:center;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:#22c55e">✅</td>
        </tr>
                <tr style="background:rgba(255,255,255,.02)">
          <td style="padding:9px 14px;;color:var(--text);font-weight:700">Precio</td>
          <td style="text-align:center;padding:9px 14px;;color:var(--muted)">Gratis / pago</td>
          <td style="text-align:center;padding:9px 14px;;color:var(--muted)">Gratis</td>
          <td style="text-align:center;padding:9px 14px;;background:rgba(212,168,83,.04);border-left:1px solid rgba(212,168,83,.2);border-right:1px solid rgba(212,168,83,.2);font-weight:700;color:var(--accent)">29€ + IVA</td>
        </tr>
              </tbody>
    </table>
    </div>

    <p style="font-family:var(--sans);font-size:12px;color:var(--muted);text-align:center;margin-bottom:36px">⚠️ = disponible con limitaciones o solo en planes de pago</p>

    <div style="text-align:center">
      <a class="btn-final" href="https://webeame.com/panel/iniciar-sesion?registro=1">Crear mi Tarjeta Web →</a>
      <p style="font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:12px">29€/año + IVA · <span class="wb-guarantee-note">Garantía de devolución 90 días<sup>*</sup><span class="wb-guarantee-tip">Sujeto a condiciones · <a href="https://webeame.com/terminos">Ver términos</a></span></span></p>
    </div>
  </div>
</section>

<!-- CTA FINAL -->
<hr class="divider" />
<section id="cta">
  <div class="section-inner">
    <h2>Tu próximo cliente<br><em>ya te está buscando.</em></h2>
    <p>En el tiempo que tardas en leer esto,<br>podrías tener tu Tarjeta Web publicada y lista para compartir.</p>
    <a class="btn-final" href="https://webeame.com/panel/iniciar-sesion?registro=1">Crearla ahora →</a>
    <p class="cta-note">Sin compromiso · Sin instalación · Sin complicaciones</p>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <a class="logo" href="https://webeame.com/">
    <img class="wbLogoFooter" src="https://webeame.com/wp-content/plugins/webeame-landing/assets/webeame-logo-dark.svg" data-dark="https://webeame.com/wp-content/plugins/webeame-landing/assets/webeame-logo-dark.svg" data-light="https://webeame.com/wp-content/plugins/webeame-landing/assets/webeame-logo-light.svg" alt="Webéame" height="28"
         onerror="this.style.display='none';this.nextElementSibling.style.display='inline'" />
    <span style="display:none">Webéame<span style="color:#D4A853">.</span></span>
  </a>
  <div class="footer-legal-links" style="display:flex;gap:20px;flex-wrap:wrap;">
    <a href="https://webeame.com/privacidad" class="footer-legal-link">Privacidad</a>
    <a href="https://webeame.com/cookies" class="footer-legal-link">Cookies</a>
    <a href="https://webeame.com/aviso-legal" class="footer-legal-link">Aviso legal</a>
    <a href="https://webeame.com/terminos" class="footer-legal-link">Términos</a>
  </div>
  <div class="footer-copy">© 2026 Webéame · Julio Bazaga Ceballos</div>
</footer>

<script>
(function(){
  const btn  = document.getElementById('hamburger');
  const menu = document.getElementById('mobileMenu');
  btn.addEventListener('click', function(){
    btn.classList.toggle('open');
    menu.classList.toggle('open');
    document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';
  });
  menu.querySelectorAll('a').forEach(function(a){
    a.addEventListener('click', function(){
      btn.classList.remove('open');
      menu.classList.remove('open');
      document.body.style.overflow = '';
    });
  });
})();
</script>
<script>
const API_DIR    = 'https://webeame.com/wp-json/webeame/v1/public/landing-directory';
const SITE       = 'https://webeame.com';
const PANEL_LOGIN  = SITE + '/panel/iniciar-sesion';
const PANEL_DASH   = SITE + '/panel/escritorio';
const REGISTER_URL = 'https://webeame.com/panel/iniciar-sesion?registro=1';
const NO_AVATAR_URL = 'https://webeame.com/wp-content/plugins/webeame-core/assets/NoAvatar.png';
const NO_HERO_URL   = 'https://webeame.com/wp-content/plugins/webeame-core/assets/NoHero.png';

// ── Auth: detectar sesión activa del panel (sessionStorage) ────
(function () {
  const token = sessionStorage.getItem('wb_access_token') || '';
  const email = sessionStorage.getItem('wb_account_email') || '';
  const authEl = document.getElementById('nav-auth');
  if (!authEl) return;

  if (token) {
    const short = email.length > 24 ? email.substring(0, 22) + '…' : email;
    authEl.innerHTML =
      `<span class="nav-user">${short}</span>` +
      `<a class="btn-ghost" href="${PANEL_DASH}">Mi panel</a>` +
      `<button class="btn-ghost" id="btn-logout">Cerrar sesión</button>`;

    document.getElementById('btn-logout').onclick = function () {
      ['wb_access_token','wb_refresh_token','wb_account_id','wb_account_email'].forEach(k => {
        sessionStorage.removeItem(k);
        try { localStorage.removeItem(k); } catch(e) {}
      });
      window.location.href = PANEL_LOGIN;
    };
  } else {
    authEl.innerHTML =
      `<a class="btn-ghost" href="${PANEL_LOGIN}">Iniciar sesión</a>` +
      `<a class="btn-primary" href="${REGISTER_URL}">Crear mi web</a>`;
  }
})();

// ── Paleta de colores de fallback para profesionales sin avatar ──
const PALETTE = [
  { color:'var(--text)', bg:'var(--card-bg, var(--surface))', accent:'var(--text)' },
];
function palette(i) { return PALETTE[0]; }

// ─────────────────────────────────────────────
// HERO — Mini-cards con profesionales reales
// ─────────────────────────────────────────────
const cardsWrap = document.getElementById('cardsWrap');
const dotsEl    = document.getElementById('dots');
let heroActive  = 0;
let heroTimer;

async function loadHeroCards() {
  try {
    const res  = await fetch(`${API_DIR}?per_page=4`);
    const data = await res.json();
    // webeame-core devuelve { items: [...] }
    const items = data.items || [];

    cardsWrap.innerHTML = '';
    dotsEl.innerHTML    = '';

    if (!items.length) {
      cardsWrap.innerHTML = '<div style="color:rgba(255,255,255,0.2);font-family:sans-serif;font-size:13px;padding:20px;text-align:center">Sin webs aún</div>';
      return;
    }

    items.forEach((p, i) => {
      const pal     = palette(i);
      const _city = (p.city || '').trim();
      const _prov = (p.province || '').trim();
      const _cityLabel = _city + (_prov && _prov.toLowerCase() !== _city.toLowerCase() ? ', ' + _prov : '');
      const _locLabel = p.work_mode === 'online' ? '🌐 Online'
        : p.work_mode === 'hybrid' ? (_cityLabel ? _cityLabel + ' · 🌐' : '🌐 Online')
        : _cityLabel;
      const sub     = [p.profession, _locLabel].filter(Boolean).join(' · ');

      const card = document.createElement('div');
      card.className = 'mini-card' + (i === 0 ? ' active' : '');

      const avatarHTML = p.avatar_url
        ? `<img class="g-avatar-img" src="${p.avatar_url}" alt="${p.name}" loading="lazy" />`
        : p.logo_url
          ? `<img class="g-avatar-img" src="${p.logo_url}" alt="${p.name}" loading="lazy" style="object-fit:contain;background:#fff;padding:3px" />`
          : `<img class="g-avatar-img" src="${NO_AVATAR_URL}" alt="" loading="lazy" />`;

      const heroSrc = p.hero_url || p.profession_hero_url || NO_HERO_URL;
      const heroOpacity = p.hero_url ? '' : 'style="opacity:.35"';
      const heroHTML = `<img class="g-hero-img" src="${heroSrc}" alt="" loading="lazy" ${heroOpacity} />`;

      const logoHTML = p.logo_url && !p.avatar_url
        ? ''
        : p.logo_url
          ? `<img class="g-logo" src="${p.logo_url}" alt="" loading="lazy" />`
          : '';

      card.innerHTML = `
        <div class="g-img-wrap">${heroHTML}</div>
        <div class="g-avatar-row">${avatarHTML}${logoHTML}</div>
        <div class="card-inner">
          <div class="g-name">${p.name || ''}</div>
          <div class="g-role">${sub}</div>
          ${p.bio ? `<div class="g-bio">${p.bio.replace(/<[^>]*>/g,'').trim()}</div>` : ''}
          <div class="card-btns">
            <a href="${p.url}" class="card-btn-main" style="background:var(--accent);color:#0a0c12">Ver web</a>
          </div>
        </div>`;
      cardsWrap.appendChild(card);

      const dot = document.createElement('div');
      dot.className = 'dot' + (i === 0 ? ' active' : '');
      dot.addEventListener('click', () => goToCard(i));
      dotsEl.appendChild(dot);
    });

    startHeroTimer();
    cardsWrap.addEventListener('mouseenter', () => clearInterval(heroTimer));
    cardsWrap.addEventListener('mouseleave', startHeroTimer);

  } catch(e) {
    cardsWrap.innerHTML = '';
  }
}

function goToCard(n) {
  const cards = cardsWrap.querySelectorAll('.mini-card');
  const dots  = dotsEl.querySelectorAll('.dot');
  if (cards[heroActive]) cards[heroActive].classList.remove('active');
  if (dots[heroActive])  dots[heroActive].classList.remove('active');
  heroActive = n;
  if (cards[heroActive]) cards[heroActive].classList.add('active');
  if (dots[heroActive])  dots[heroActive].classList.add('active');
}

function startHeroTimer() {
  const cards = cardsWrap.querySelectorAll('.mini-card');
  if (!cards.length) return;
  heroTimer = setInterval(() => goToCard((heroActive + 1) % cards.length), 3000);
}

// ─────────────────────────────────────────────
// DIRECTORIO — Grid con paginación y filtros
// ─────────────────────────────────────────────
const grid       = document.getElementById('galleryGrid');
const pagination = document.getElementById('pagination');
const searchQ    = document.getElementById('searchQ');
const searchCity = document.getElementById('searchCity');

let dirPage = 1;
let dirQ    = '';
let dirCity = '';
let dirDebounce;

async function loadDirectory() {
  grid.innerHTML = '<div class="gallery-loading">Cargando profesionales…</div>';
  pagination.innerHTML = '';

  const params = new URLSearchParams({
    q: dirQ, city: dirCity, page: dirPage, per_page: 12
  });

  try {
    const res  = await fetch(`${API_DIR}?${params}`);
    const data = await res.json();
    const items = data.items || [];

    grid.innerHTML = '';

    if (!items.length) {
      grid.innerHTML = '<div class="no-results">No hay profesionales que coincidan con tu búsqueda.</div>';
      return;
    }

    items.forEach((p, i) => {
      const pal = palette(i);
      const _city2 = (p.city || '').trim();
      const _prov2 = (p.province || '').trim();
      const _cityLabel2 = _city2 + (_prov2 && _prov2.toLowerCase() !== _city2.toLowerCase() ? ', ' + _prov2 : '');
      const _locLabel2 = p.work_mode === 'online' ? '🌐 Online'
        : p.work_mode === 'hybrid' ? (_cityLabel2 ? _cityLabel2 + ' · 🌐' : '🌐 Online')
        : _cityLabel2;
      const sub = [p.profession, _locLabel2].filter(Boolean).join(' · ');
      const bio = p.bio ? p.bio.replace(/<[^>]*>/g, '').trim() : '';

      const card = document.createElement('a');
      card.className        = 'gallery-card';
      card.href             = p.url + (p.url.includes('?') ? '&' : '?') + 'utm_source=Directorio+Webeame';
      card.target           = '_blank';
      card.rel              = 'noopener';

      // Zona hero
      const heroSrc = p.hero_url || p.profession_hero_url || NO_HERO_URL;
      const heroOpacity = p.hero_url ? '' : 'style="opacity:.35"';
      const heroHTML = `<img class="g-hero-img" src="${heroSrc}" alt="" loading="lazy" ${heroOpacity} />`;

      // Avatar: real > logo como avatar > placeholder genérico
      const avatarHTML = p.avatar_url
        ? `<img class="g-avatar-img" src="${p.avatar_url}" alt="${p.name}" loading="lazy" />`
        : p.logo_url
          ? `<img class="g-avatar-img" src="${p.logo_url}" alt="${p.name}" loading="lazy" style="object-fit:contain;background:#fff;padding:3px" />`
          : `<img class="g-avatar-img" src="${NO_AVATAR_URL}" alt="" loading="lazy" />`;

      // Logo junto al avatar (solo si también hay avatar propio)
      const logoHTML = p.logo_url && !p.avatar_url
        ? ''
        : p.logo_url
          ? `<img class="g-logo" src="${p.logo_url}" alt="" loading="lazy" />`
          : '';

      card.innerHTML = `
        <div class="g-img-wrap">${heroHTML}</div>
        <div class="g-avatar-row">${avatarHTML}${logoHTML}</div>
        <div class="card-inner">
          <div class="g-name">${p.name || ''}</div>
          <div class="g-role">${sub}</div>
          ${bio ? `<div class="g-bio">${bio}</div>` : ''}
        </div>`;
      grid.appendChild(card);
    });

    // Paginación server-side
    const pages = data.pages || 1;
    if (pages > 1) {
      for (let pg = 1; pg <= pages; pg++) {
        const btn = document.createElement('button');
        btn.className   = 'page-btn' + (pg === dirPage ? ' active' : '');
        btn.textContent = pg;
        btn.addEventListener('click', () => { dirPage = pg; loadDirectory(); document.getElementById('galleryGrid')?.scrollIntoView({behavior:'smooth', block:'start'}); });
        pagination.appendChild(btn);
      }
    }

  } catch(e) {
    grid.innerHTML = '<div class="no-results">Error cargando el directorio.</div>';
  }
}

searchQ.addEventListener('input', () => {
  clearTimeout(dirDebounce);
  dirDebounce = setTimeout(() => {
    dirQ = searchQ.value.trim();
    dirPage = 1;
    loadDirectory();
  }, 350);
});

let cityDebounce;
searchCity.addEventListener('input', () => {
  clearTimeout(cityDebounce);
  cityDebounce = setTimeout(() => {
    dirCity = searchCity.value.trim();
    dirPage = 1;
    loadDirectory();
  }, 350);
});

// ─────────────────────────────────────────────
// NAV scroll
// ─────────────────────────────────────────────
window.addEventListener('scroll', () => {
  document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 40);
});

// ─────────────────────────────────────────────
// INIT
// ─────────────────────────────────────────────
loadHeroCards();
loadDirectory();
</script>

<script>
(function(){
  var btn = document.getElementById('wbThemeToggle');
  var btnMobile = document.getElementById('wbThemeToggleMobile');
  var stored = localStorage.getItem('wb_theme');
  var isMobile = window.innerWidth < 768;
  // Escritorio: oscuro por defecto. Móvil: claro por defecto.
  var dark = stored ? stored === 'dark' : !isMobile;

  function applyTheme(isDark) {
    document.body.classList.toggle('wb-light', !isDark);
    var label = isDark ? '&#9728;&#xFE0E; Modo claro' : '&#127769; Modo oscuro';
    if (btn) btn.innerHTML = label;
    if (btnMobile) btnMobile.innerHTML = label;
    document.querySelectorAll('[data-dark][data-light]').forEach(function(img) {
      img.src = isDark ? img.getAttribute('data-dark') : img.getAttribute('data-light');
    });
  }
  applyTheme(dark);

  function toggle() {
    dark = !dark;
    localStorage.setItem('wb_theme', dark ? 'dark' : 'light');
    applyTheme(dark);
  }
  if (btn) btn.addEventListener('click', toggle);
  if (btnMobile) btnMobile.addEventListener('click', toggle);
})();
</script>

<!-- WEBITO: Chat flotante -->
<style>
  .wbt-btn{position:fixed;bottom:28px;right:28px;z-index:999;width:52px;height:61px;background:transparent;border:none;cursor:pointer;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .2s,opacity .2s;}
  .wbt-btn:hover{transform:scale(1.08);}
  .wbt-btn img{width:52px;height:61px;display:block;}
  .wbt-btn.open{opacity:0;pointer-events:none;}

  .wbt-btn.open{background:#1A1714;}
  .wbt-box{position:fixed;bottom:96px;right:28px;z-index:998;width:340px;max-width:calc(100vw - 32px);background:#161410;border:1px solid rgba(212,168,83,.25);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.7);display:none;flex-direction:column;overflow:hidden;font-family:'DM Sans',system-ui,sans-serif;}
  .wbt-box.open{display:flex;}
  .wbt-header{padding:14px 18px;background:rgba(212,168,83,.08);border-bottom:1px solid rgba(212,168,83,.15);display:flex;align-items:center;gap:10px;position:relative;}
  .wbt-close{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.6);line-height:1;transition:background .2s;}
  .wbt-close:hover{background:rgba(255,255,255,.2);color:#fff;}
  .wbt-avatar{width:36px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .wbt-name{font-weight:700;font-size:14px;color:#F0EDE6;}
  .wbt-sub{font-size:11px;color:rgba(212,168,83,.8);}
  .wbt-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:320px;}
  .wbt-msg{max-width:85%;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.55;}
  .wbt-msg.bot{background:rgba(255,255,255,.06);color:#E8E4DC;border-bottom-left-radius:4px;align-self:flex-start;}
  .wbt-msg.user{background:var(--accent);color:#0E0D0B;font-weight:600;border-bottom-right-radius:4px;align-self:flex-end;}
  .wbt-msg a{color:inherit;text-decoration:underline;}
  .wbt-input-wrap{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.07);}
  .wbt-input{flex:1;background:transparent;border:none;padding:13px 16px;font-family:'DM Sans',system-ui,sans-serif;font-size:13px;color:#F0EDE6;outline:none;}
  .wbt-input::placeholder{color:rgba(255,255,255,.25);}
  .wbt-send{background:var(--accent);border:none;width:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;color:#0E0D0B;transition:opacity .2s;flex-shrink:0;}
  .wbt-send:hover{opacity:.85;}
  .wbt-send:disabled{opacity:.4;cursor:not-allowed;}
  .wbt-typing{display:none;align-items:center;gap:4px;padding:10px 13px;align-self:flex-start;}
  .wbt-typing.show{display:flex;}
  .wbt-typing span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);animation:wbt-bounce .9s infinite;}
  .wbt-typing span:nth-child(2){animation-delay:.15s;}
  .wbt-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes wbt-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
  @media(max-width:480px){.wbt-box{right:12px;bottom:84px;width:calc(100vw - 24px);}.wbt-btn{right:16px;bottom:16px;}}
</style>

<button class="wbt-btn" id="wbtBtn" aria-label="Chat con Webito">
  <img id="webitoImg" src="https://webeame.com/wp-content/plugins/webeame-landing/assets/webito-open.webp" alt="Webito" style="width:52px;height:61px" />
</button>
<div class="wbt-box" id="wbtBox">
  <div class="wbt-header">
    <div class="wbt-avatar"><img src="https://webeame.com/wp-content/plugins/webeame-landing/assets/webito-open.webp" alt="Webito" style="width:36px;height:42px;display:block;" /></div>
    <div>
      <div class="wbt-name">Webito</div>
      <div class="wbt-sub">Asistente de Webéame</div>
    </div>
    <button class="wbt-close" id="wbtClose" aria-label="Cerrar">&#x2715;</button>
  </div>
  <div class="wbt-msgs" id="wbtMsgs">
    <div class="wbt-msg bot">¡Hola! Soy Webito 👋 Estoy aquí para contarte todo sobre Webéame. ¿En qué puedo ayudarte?</div>
  </div>
  <div class="wbt-typing" id="wbtTyping" style="padding:0 16px 8px;display:none;align-items:center;gap:4px;">
    <span></span><span></span><span></span>
  </div>
  <div class="wbt-input-wrap">
    <input class="wbt-input" id="wbtInput" type="text" placeholder="Escribe tu pregunta…" maxlength="500" autocomplete="off" />
    <button class="wbt-send" type="button" id="wbtSend" aria-label="Enviar">&#x27A4;</button>
  </div>
</div>

<script>
(function(){
  var btn    = document.getElementById('wbtBtn');
  var box    = document.getElementById('wbtBox');
  var WEBITO_OPEN   = 'https://webeame.com/wp-content/plugins/webeame-landing/assets/webito-open.webp';
  var WEBITO_CLOSED = 'https://webeame.com/wp-content/plugins/webeame-landing/assets/webito-closed.webp';
  var blinkTimer;

  function startBlink() {
    clearInterval(blinkTimer);
    blinkTimer = setInterval(function(){
      var i = document.getElementById('webitoImg');
      if (!i) { clearInterval(blinkTimer); return; }
      i.src = WEBITO_CLOSED;
      setTimeout(function(){ var i2 = document.getElementById('webitoImg'); if(i2) i2.src = WEBITO_OPEN; }, 100);
    }, 7500 + Math.random() * 1000);
  }
  startBlink();

  var msgs   = document.getElementById('wbtMsgs');
  var input  = document.getElementById('wbtInput');
  var send   = document.getElementById('wbtSend');
  var typing = document.getElementById('wbtTyping');
  var API    = 'https://webeame.com/wp-json/webeame/v1/public/chat';
  var history = [];

  btn.addEventListener('click', function(){
    var open = box.classList.toggle('open');
    btn.classList.toggle('open', open);
    if (!open) { btn.innerHTML = '<img id="webitoImg" src="' + WEBITO_OPEN + '" alt="Webito" style="width:52px;height:61px">'; startBlink(); }
    if (open) { input.focus(); scrollBottom(); }
  });

  document.getElementById('wbtClose').addEventListener('click', function(){
    box.classList.remove('open');
    btn.classList.remove('open');
    btn.innerHTML = '<img id="webitoImg" src="' + WEBITO_OPEN + '" alt="Webito" style="width:52px;height:61px">';
    startBlink();
  });

  function scrollBottom(){
    msgs.scrollTop = msgs.scrollHeight;
  }

  function renderLinks(text) {
    // Primero, convertir [texto](url) en enlaces
    text = text.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, function(_, label, url) {
      return '<a href="' + url + '" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:underline">' + label + '</a>';
    });
    // Luego, convertir URLs sueltas que no estén ya en un enlace
    text = text.replace(/(?<![("'])https?:\/\/[^\s<>"]+/g, function(url) {
      return '<a href="' + url + '" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:underline">' + url + '</a>';
    });
    return text;
  }

  function addMsg(role, text){
    var div = document.createElement('div');
    div.className = 'wbt-msg ' + role;
    div.innerHTML = renderLinks(text);
    msgs.appendChild(div);
    scrollBottom();
  }

  function typeMsg(text) {
    var div = document.createElement('div');
    div.className = 'wbt-msg bot';
    msgs.appendChild(div);
    var i = 0;
    var speed = 18;
    function tick() {
      if (i < text.length) {
        div.textContent = text.slice(0, i + 1);
        i++;
        scrollBottom();
        setTimeout(tick, speed);
      } else {
        // Al terminar, convertir enlaces
        div.innerHTML = renderLinks(text);
        send.disabled = false;
        input.focus();
      }
    }
    tick();
  }

  async function sendMsg(){
    var text = input.value.trim();
    if (!text || send.disabled) return;
    input.value = '';
    send.disabled = true;

    history.push({role:'user', content:text});
    addMsg('user', text);

    typing.classList.add('show');
    scrollBottom();

    try {
      var res = await fetch(API, {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({messages: history})
      });
      var data = await res.json();
      var reply = (data.data && data.data.reply) ? data.data.reply : 'Lo siento, no pude responder. Inténtalo de nuevo.';
      history.push({role:'assistant', content:reply});
      typing.classList.remove('show');
      typeMsg(reply);
    } catch(e){
      typing.classList.remove('show');
      addMsg('bot', 'Hubo un error de conexión. Inténtalo en un momento.');
      send.disabled = false;
      input.focus();
    }

  }

  send.addEventListener('click', sendMsg);
  input.addEventListener('keydown', function(e){
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMsg(); }
  });
})();
</script>

<!-- POPUP PETICIÓN DE INVITACIÓN -->
<div id="wbInvPopup" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:24px">
  <div style="background:#0f172a;border-radius:16px;padding:32px;max-width:440px;width:100%;box-shadow:0 32px 80px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);position:relative">
    <button id="wbInvPopupClose" style="position:absolute;top:16px;right:16px;background:none;border:none;color:rgba(255,255,255,.4);font-size:22px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px" aria-label="Cerrar">×</button>
    <h3 style="margin:0 0 6px;font-size:20px;font-weight:700;color:#fff">Pedir invitación</h3>
    <p style="margin:0 0 24px;font-size:13px;color:rgba(255,255,255,.5)">Te contactamos en breve con tu código de invitación.</p>
    <div id="wbInvForm">
      <div style="margin-bottom:14px">
        <label style="display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">Tu nombre</label>
        <input id="wbInvName" type="text" placeholder="María García" style="width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;font-family:inherit;outline:none" />
      </div>
      <div style="margin-bottom:14px">
        <label style="display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">Tu email</label>
        <input id="wbInvEmail" type="email" placeholder="maria@ejemplo.com" style="width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;font-family:inherit;outline:none" />
      </div>
      <div style="margin-bottom:24px">
        <label style="display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">¿A qué te dedicas?</label>
        <input id="wbInvProfession" type="text" placeholder="Psicóloga, fisioterapeuta, diseñadora..." style="width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;font-family:inherit;outline:none" />
      </div>
      <p id="wbInvError" style="display:none;color:#ef4444;font-size:13px;margin:0 0 14px"></p>
      <button id="wbInvSubmit" style="width:100%;padding:12px;background:var(--accent);color:#0a0c12;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit">Pedir invitación</button>
    </div>
    <div id="wbInvSuccess" style="display:none;text-align:center;padding:16px 0">
      <div style="font-size:36px;margin-bottom:12px">✅</div>
      <p style="margin:0;font-size:16px;font-weight:700;color:#fff">¡Petición enviada!</p>
      <p style="margin:8px 0 0;font-size:13px;color:rgba(255,255,255,.5)">Te contactamos en breve con tu código.</p>
    </div>
  </div>
</div>
<script>
(function(){
  const popup   = document.getElementById('wbInvPopup');
  const btnOpen = document.getElementById('btnPedirInvitacion');
  const btnClose= document.getElementById('wbInvPopupClose');
  const btnSend = document.getElementById('wbInvSubmit');
  const errEl   = document.getElementById('wbInvError');
  const formEl  = document.getElementById('wbInvForm');
  const successEl = document.getElementById('wbInvSuccess');
  const API = 'https://webeame.com/wp-json/webeame/v1/public/request-invitation';

  function openPopup() { popup.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
  function closePopup() { popup.style.display = 'none'; document.body.style.overflow = ''; }

  if (btnOpen) btnOpen.addEventListener('click', openPopup);
  if (btnClose) btnClose.addEventListener('click', closePopup);
  popup?.addEventListener('click', (e) => { if (e.target === popup) closePopup(); });
  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePopup(); });

  if (btnSend) btnSend.addEventListener('click', async () => {
    const name       = document.getElementById('wbInvName')?.value.trim() || '';
    const email      = document.getElementById('wbInvEmail')?.value.trim() || '';
    const profession = document.getElementById('wbInvProfession')?.value.trim() || '';

    errEl.style.display = 'none';
    if (name.length < 2)       { errEl.textContent = 'El nombre es demasiado corto.'; errEl.style.display = 'block'; return; }
    if (!email.includes('@'))   { errEl.textContent = 'El email no parece válido.'; errEl.style.display = 'block'; return; }
    if (profession.length < 2) { errEl.textContent = 'Indica a qué te dedicas.'; errEl.style.display = 'block'; return; }

    btnSend.disabled = true;
    btnSend.textContent = 'Enviando…';

    try {
      const res = await fetch(API, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, profession }),
      });
      const data = await res.json();
      if (data.data?.sent || data.ok) {
        formEl.style.display = 'none';
        successEl.style.display = 'block';
        setTimeout(closePopup, 3000);
      } else {
        errEl.textContent = data.message || 'No se pudo enviar. Inténtalo de nuevo.';
        errEl.style.display = 'block';
        btnSend.disabled = false;
        btnSend.textContent = 'Pedir invitación';
      }
    } catch(e) {
      errEl.textContent = 'Error de conexión. Inténtalo de nuevo.';
      errEl.style.display = 'block';
      btnSend.disabled = false;
      btnSend.textContent = 'Pedir invitación';
    }
  });
})();
</script>
</body>
</html>
